<template>
    <list-layout>
        <div slot="search">
            <el-form :model="queryParams" :inline="true" ref="queryForm" label-width="88px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item :label="$t('material.materialName')" prop="masterialName">
                            <el-input v-model="queryParams.masterialName" :placeholder="$t('public.placeholder',{placeholder: $t('material.materialName')})" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="$t('material.materialCode')" prop="materialCode">
                            <el-input v-model="queryParams.materialCode" :placeholder="$t('public.placeholder',{placeholder: $t('material.materialCode')})" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="$t('inventoryManagement.supplierBatchNo')" prop="lichn">
                            <el-input v-model="queryParams.lichn" :placeholder="$t('public.placeholder',{placeholder: $t('inventoryManagement.supplierBatchNo')})" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="$t('inventoryManagement.batch')" prop="lot">
                            <el-input v-model="queryParams.lot" :placeholder="$t('public.placeholder',{placeholder: $t('inventoryManagement.batch')})" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="$t('defectIncoming.data')" prop="classData">
                            <el-select v-model="queryParams.classData" :placeholder="
                                $t('public.select_holder', {
                                    select_holder: $t('defectIncoming.data'),
                                })
                                " style="width: 100%" clearable size="small">
                                <el-option key="1" label="全部" value="1"> </el-option>
                                <el-option key="2" label="检验值" value="2"></el-option>
                                <el-option key="3" label="结果值" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item :label="$t('defectIncoming.ispectDate')">
                            <el-date-picker v-model="dateRange" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" autocomplete="off" range-separator="-" :start-placeholder="$t('public.startDate')" :end-placeholder="$t('public.endDate')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <div style="text-align:center">
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{$t('public.query')}}</el-button>
                            <el-button icon="el-icon-refresh" class="resectBtn" @click="resetQuery" size="mini">{{$t('public.reset')}}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="app-container">
            <div class="container-header">
                <div class="header-left">
                    {{$t('bommaterial.inspectProjectData')}}
                </div>
            </div>
            <el-row :gutter="10" class="table-action-wrap btnGroup" style="margin-top:5px">
                <el-col :span="1.5">
                    <el-button class="exportitemBtn" size="mini" @click="handleExport">
                        <img src="@/assets/images/icons/daochu.png" alt="">
                        {{$t('public.export')}}
                    </el-button>
                </el-col>
            </el-row>

            <div class="container-table" style="margin-top:12px">
                <el-table :height="tableHeight" border stripe v-loading="loading" :data="typeList">

                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" />
                    <el-table-column :label="$t('bommaterial.inspectDate')" align="left" prop="inspectionStartTime" :show-overflow-tooltip="true" minWidth="160" />
                    <el-table-column :label="$t('mrbForm.supplierBatchNo')" align="left" prop="lichn" :show-overflow-tooltip="true" minWidth="160" />

                    <el-table-column :label="$t('bommaterial.batchNo')" align="left" :show-overflow-tooltip="true" prop="lot" minWidth="160" />
                    <el-table-column :label="$t('bommaterial.inspectProject')" align="left" prop="projectName" :show-overflow-tooltip="true" minWidth="160" />

                    <el-table-column :label="$t('bommaterial.targetValue')" align="left" prop="targetValue" :show-overflow-tooltip="true" minWidth="160" />
                    <el-table-column :label="$t('bommaterial.lowerLimit')" :show-overflow-tooltip="true" align="left" prop="lowerLimit" minWidth="160" />
                    <el-table-column :label="$t('bommaterial.upperLimit')" align="left" prop="upperLimit" :show-overflow-tooltip="true" minWidth="160" />
                    <el-table-column :label="$t('inventoryManagement.inspectionValue')" align="center" :show-overflow-tooltip="true">
                        <el-table-column :label="item" v-for="(item,index) in tableHeader1" :key="index" minWidth="110" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span>{{scope.row.checkoutValue ?scope.row.checkoutValue.split(',')[index]:''}}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column :label="$t('inventoryManagement.resultValue')" align="center" prop="resultValue">
                        <el-table-column :label="item" v-for="(item,index) in tableHeader2" :key="index" minWidth="110" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span>{{scope.row.resultValue ?scope.row.resultValue.split(',')[index]:''}}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>

                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" />
            </div>

        </div>
    </list-layout>
</template>
<script>
import { inspectItemList } from '@/api/statistical/statistical'
import { mapGetters, mapState } from 'vuex'
export default {
    name: 'inspectItem',
    data() {
        return {
            dateRange: [],
            tableHeight: 'calc(100vh - 308px)',
            typeList: [],
            tableHeader1: [],
            tableHeader2: [],
            queryParams: {
                masterialName: '',
                materialCode: '',
                dataSource: '',
                lichn: '',
                lot: '',
                inspectionStartTime: '',
                inspectionEndTime: '',
                pageSize: 50,
                classData: '1',
            },
            total: 0,
        }
    },
    computed: {
        ...mapState({
            isFold: (state) => state.app.isFold,
        }),
    },
    watch: {
        isFold(val) {
            if (val === true) {
                this.tableHeight = 'calc(100vh - 308px)'
            } else {
                this.tableHeight = 'calc(100vh - 426px)'
            }
        },
    },
    created() {
        this.getList()
    },
    methods: {
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        getList() {
            this.loading = true
            this.queryParams.exportFlag = undefined
            inspectItemList(this.queryParams).then((response) => {
                let samplingAmount = 0
                let typeList = response.rows
                let tableHeader1 = []
                let tableHeader2 = []
                typeList.forEach((io) => {
                    if (io.samplingAmount && io.checkoutType !== '布尔型') {
                        if (parseFloat(io.samplingAmount) > samplingAmount) {
                            samplingAmount = io.samplingAmount
                        }
                    }
                    if (io.checkoutType === '布尔型') {
                        io['value' + 0] = io.checkoutValue
                    } else {
                        for (let i = 0; i < io.samplingAmount; i++) {
                            let values = io.checkoutValue
                                ? io.checkoutValue.split(',')
                                : []
                            io['value' + i] = values[i]
                        }
                    }
                })
                for (let i = 0; i < samplingAmount; i++) {
                    tableHeader1.push(
                        this.$t('bommaterial.inspectValue') + (i + 1)
                    )
                    tableHeader2.push(
                        this.$t('bommaterial.resultValue') + (i + 1)
                    )
                }
                this.tableHeader1 = tableHeader1
                this.tableHeader2 = tableHeader2
                this.typeList = typeList
                this.total = response.total
                this.loading = false
            })
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.dateRange = []
        },
        /** 导出按钮操作 */
        handleExport() {
            if (this.dateRange.length) {
                this.queryParams.inspectionStartTime = this.dateRange[0]
                this.queryParams.inspectionEndTime = this.dateRange[1]
            }
            this.download(
                '/ny-iqc/incomingInspection/exportClassList',
                {
                    ...this.queryParams,
                    exportFlag: 1,
                },
                `${this.$t(
                    'defectIncoming.inspectionInfo'
                )}_${new Date().getTime()}.xlsx`
            )
        },
    },
}
</script>
<style lang="scss" scoped>
//导出按钮
.exportitemBtn {
    background: #f7f8fa;
    color: #606266;
    border: none;
    img {
        width: 12px;
        height: 12px;
        margin-bottom: -1px;
        margin-right: 2px;
    }
}
.exportitemBtn:hover {
    color: #0b7be3;
}
.header-left {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    padding: 3px 0 10px;
    display: inline-flex;
    justify-content: center;
    border-bottom: 2px solid #0b7be3;
}
.header-right {
    float: right;
}
.container-header {
    border-bottom: 1px solid #ededf2;
}
.container-table {
    float: left;
    //margin-top:6px;
    width: 100%;
}
</style>
